<template>
	<xn-form-container :title="batchNumber" :width="1500" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-table
			:columns="columns"
			:data-source="dataSource"
			:pagination="false"
			:row-key="(record) => record.id"
			:scroll="{ x: 'max-content' }"
			bordered
			:showHeader="false"
		></a-table>
	</xn-form-container>
</template>

<script setup>
	import caseApi from '@/api/tjzy/case/caseApi'

	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const batchNumber = ref()
	const dataSource = ref([])
	const columns = [
		{
			dataIndex: 'key1',
			align: 'right'
		},
		{
			dataIndex: 'key2'
		},
		{
			dataIndex: 'key3',
			align: 'right'
		},
		{
			dataIndex: 'key4'
		}
	]
	// 打开抽屉
	const onOpen = (caseDetailId) => {
		visible.value = true
		caseApi.getCaseDetailJson(caseDetailId).then((res) => {
			dataSource.value = res
		})
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		dataSource.value = []
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
